<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  [v-cloak] {
    display: none;
  }
  table {
    border: 1px solid #E9E9E9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
  }
  th, td {
    padding: 8px 16px;
    border: 1px solid #E9E9E9;
    text-align: left;
  }
  th {
    background: #F7F7F7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
  }
</style>
<body>
<div id="app" v-clock>
  <template v-if="list.length">
    <table>
      <thead>
        <tr><input type="checkbox" @click="checkAll($event)" v-model="checked"></tr>
        <tr></tr>
        <tr>商品名称</tr>
        <tr>商品单价</tr>
        <tr>购买数量</tr>
        <tr>操作</tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list">
          <td><input type="checkbox" @click="checkOne(index)" v-model="item.check"></td>
          <td>{{ index+1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>{{ item.count }}
            <button @click="handleAdd(index)">+</button>
          </td>
          <td>
            <button @click="handleRemove(index)">移除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- totalPrice是依赖于商品列表而动态变化的，所以我们用计算属性来实现 -->
    <div>总价：¥ {{ totalPrice }}</div>
  </template>
  <div v-else>购物车为空</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      list: [
        {
          id: 1,
          name: 'iPhone 7',
          price: 6188,
          count: 1,
          check: false
        },
        {
          id: 2,
          name: 'iPad Pro',
          price: 5888,
          count: 1,
          check: false
        },
        {
          id: 3,
          name: 'MacBook Pro',
          price: 21488,
          count: 1,
          check: false
        }
      ]
    },
    mounted () {
    },
    // 计算属性(实质上指的是方法的返回值)
    computed: {
      totalPrice: function () {
        var total = 0;
        this.list.filter(value => value.check).forEach((item) => {
          total += item.count * item.price
        })
        // for (var i = 0; i < this.list.length; i++) {
        //   var item = this.list[i]
        //   total += item.count * item.price
        // }
        return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')
      },
      checked: function () {
        var checkAll = false
        for (var i = 0; i < this.list.length; i++) {
          if (this.list[i].check) {
            checkAll = true
          } else {
            return checkAll = false
          }
        }
        return checkAll
      }
    },
    methods: {
      handleReduce (index) {
        if (this.list[index].count === 1) return;
        this.list[index].count--
      },
      handleAdd (index) {
        this.list[index].count++
      },
      handleRemove (index) {
        this.list.splice(index, 1)
      },
      checkOne (index) {
        this.list[index].check = !this.list[index].check
      },
      checkAll (event) {
        if (event.target.checked) {
          this.list.map(value => value.check = true)
        } else {
          this.list.map(value => value.check = false)
        }
      }
    }
  });

</script>
</html>